<template>
	<view class="container" :style="[ctop()]">
		<view :style="[top()]" class="top fixed">
			<view class="flex j-end a-center top">
				<view class="flex a-center place">
					<u-icon name="file-text" size="40" class="msg"></u-icon>
					<view>发布规则</view>
				</view>
			</view>
		</view>
		<view class="big-title">请选择任务类型</view>
		<view class="block" v-for="(item,i) in list" :key="i">
			<view class="title">{{item.title}}</view>
			<view class="list flex wrap">
				<view class="t-item flex col j-center a-center" v-for="(ss,ii) in item.list" :key="ii" @tap="goto(ss.src+'?obj='+JSON.stringify(ss))">
					<view class="box flex j-center a-center">
						<image class="image" :src="ss.photo"></image>
					</view>
					<view class="name ecllipse">{{ss.title}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
			this.categorylist()
		},
		data() {
			return {
				list:[
					{type:'日常任务',list:[
						{name:'拼多多',src:'/pages/task-daily',icon:'https://cdn.uviewui.com/uview/common/logo.png'},
						{name:'拼多多',src:'/pages/task-daily',icon:'https://cdn.uviewui.com/uview/common/logo.png'},
						{name:'拼多多',src:'/pages/task-daily',icon:'https://cdn.uviewui.com/uview/common/logo.png'},
						{name:'拼多多',src:'/pages/task-daily',icon:'https://cdn.uviewui.com/uview/common/logo.png'},
						{name:'拼多多',src:'/pages/task-daily',icon:'https://cdn.uviewui.com/uview/common/logo.png'},
						{name:'拼多多',src:'/pages/task-daily',icon:'https://cdn.uviewui.com/uview/common/logo.png'}
					]},
					{type:'自由任务',list:[
						{name:'拼多多',src:'/pages/task-free',icon:'https://cdn.uviewui.com/uview/common/logo.png'},
						{name:'拼多多',src:'/pages/task-free',icon:'https://cdn.uviewui.com/uview/common/logo.png'},
						{name:'拼多多',src:'/pages/task-free',icon:'https://cdn.uviewui.com/uview/common/logo.png'}
					]},
					{type:'商家任务',list:[
						{name:'拼多多',src:'/pages/task-biz',icon:'https://cdn.uviewui.com/uview/common/logo.png'},
						{name:'拼多多',src:'/pages/task-biz',icon:'https://cdn.uviewui.com/uview/common/logo.png'},
						{name:'拼多多',src:'/pages/task-biz',icon:'https://cdn.uviewui.com/uview/common/logo.png'}
					]}
				]
			}
		},
		methods: {
			top(){
				let pdt = 0
				uni.getSystemInfo({  
			        success:function(e){  
			            // #ifndef MP  
			            if(e.platform == 'android') {  
			                pdt = e.statusBarHeight  
			            }else {  
			                pdt = e.statusBarHeight + 45  
			            }  
			            // #endif  
			
			            // #ifdef MP-WEIXIN  
			            let custom = wx.getMenuButtonBoundingClientRect()  
			            pdt = custom.bottom + custom.top - e.statusBarHeight  
			            // #endif  
			
			            // #ifdef MP-ALIPAY  
			            pdt = e.statusBarHeight + e.titleBarHeight  
			            // #endif  
			        }  
			    })  
				return {paddingTop:pdt+'px'}
			},
			ctop(){
				let pdt = 0
				uni.getSystemInfo({  
			        success:function(e){  
			            // #ifndef MP  
			            if(e.platform == 'android') {  
			                pdt = e.statusBarHeight  
			            }else {  
			                pdt = e.statusBarHeight + 45  
			            }  
			            // #endif  
			
			            // #ifdef MP-WEIXIN  
			            let custom = wx.getMenuButtonBoundingClientRect()  
			            pdt = custom.bottom + custom.top - e.statusBarHeight  
			            // #endif  
			
			            // #ifdef MP-ALIPAY  
			            pdt = e.statusBarHeight + e.titleBarHeight  
			            // #endif  
			        }  
			    })  
				return {paddingTop:(pdt+44)+'px'}
			},
			categorylist(){
				this.$api.categorylist().then(res => {
					let tmp = res.data.map(m => {
						//if(m.pid == 1161){
						//	m.src='/pages/task-daily'
						//}
						//if(m.pid == 1162){
						//	m.src='/pages/task-free'
						//}
						//if(m.pid == 1163){
						//	m.src='/pages/task-biz'
						//}
						m.src='/pages/task-biz'
						return m
					})
					let ol = tmp.filter(f => f.pid == 0)
					ol.map(m => {
						m.list = tmp.filter(f => f.pid == m.id)
					})
					this.list = ol
					console.log(ol)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.container{padding: 0 24rpx;}
.top{height: 88rpx;padding: 18rpx;width: 100%;background-color: #F9F9F9;left:0;top:0;z-index: 10;
	.logo{height: 52rpx;font-size: 36rpx;font-weight: bold;color:#333;}
	.place{font-size: 32rpx;color:#333;
		.msg{width: 44rpx;height: 44rpx;margin-right: 16rpx;}
	}
}	
.big-title{font-size: 36rpx;font-weight: bold;color: #333;padding-top: 32rpx;text-align: center;}
.block{border-radius: 16rpx;background-color: #FFF;margin:32rpx 0 24rpx;padding: 32rpx 24rpx;
	.title{font-size: 32rpx;color: #333;font-weight: bold;}
	.list{
		.t-item{width: 33%;margin-top:48rpx;
			.box{width: 120rpx;height: 88rpx;overflow: hidden;
				box-shadow: 0rpx 12rpx 12rpx rgba(221, 36, 36, 0.16) ;opacity: 1;border-radius: 44rpx;
				.t-icon{width:60rpx;height: 60rpx;}
			}
			.name{color: #333;font-size: 28rpx;margin-top: 24rpx;}
		}
	}
}
</style>
